<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <!-- 标签栏 -->
    <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
        <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" :immediate-check="true"
            finished-text="没有更多了" @load="load">
            <!-- 商品卡片 -->
            <van-card v-for="(item, key) in list" :key="key" :title="item.info.products.name"
                :thumb="item.info.products.thumbs_text" :num="item.info.pronum" :tag="item.status_text">
                <template #title>
                    <div class="title">订单号：{{ item.code }}</div>
                </template>

                <!-- 卡片的插槽部分 -->
                <template #desc v-if="item.info.attrs">
                    <van-tag v-for="(attr, index) in item.info.attrs" :key="index" class="tag" type="primary">{{
                        attr.value }}</van-tag>
                </template>
                <template #desc v-else>
                    <van-tag class="tag" type="danger">无规格数据</van-tag>
                </template>

                <template #tags>
                    <div class="price">下单时间：￥{{ item.createtime_text }}</div>
                </template>

                <template #price>
                    <div class="price">订单总价：￥{{ item.amount }}</div>
                </template>

                <template #footer>

                    <!-- status = 1 仅退款 -->
                    <van-button type="danger" size="small" v-if="item.status == '1'"
                        @click="OrderApply(item.id)">申请退款</van-button>

                    <!-- status = -1 -->
                    <van-button type="danger" size="small" v-if="item.status == '-1'">待退款...</van-button>

                    <!-- status = 2 -->
                    <van-button type="success" size="small" v-if="item.status == '2'"
                        @click="OrderConfirm(item.id)">确认收货</van-button>
                    <van-button type="warning" size="small" v-if="item.status == '2'">物流详情</van-button>
                    <van-button type="danger" size="small" v-if="item.status == '2'"
                        @click="OrderApply(item.id)">申请退货退款</van-button>

                    <!-- status = -2 退货退款 -->
                    <van-button type="danger" size="small" v-if="item.status == '-2'">待商家审核...</van-button>

                    <!-- status = -3 -->
                    <van-button type="success" size="small" v-if="item.status == '-3'"
                        @click="ToBackAdd(item.id)">填写退货信息</van-button>

                    <!-- status = 3 已收货 -->
                    <van-button type="warning" size="small" v-if="item.status == '3'">立即评价</van-button>

                    <van-button type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>
                </template>
            </van-card>
        </van-list>
    </van-pull-refresh>

    <!-- 退款的弹框 -->
    <van-popup v-model:show="ApplyShow" position="bottom">
        <van-form @submit="OrderApplyConfirm">
            <van-field v-model="remark" name="remark" rows="5" autosize type="textarea" maxlength="120"
                placeholder="请输入申请原因" show-word-limit :rules="[{ required: true, message: '请填写申请原因' }]" />
            <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit">提交申请</van-button>
        </van-form>
    </van-popup>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'

const { proxy } = getCurrentInstance()

//标签栏数据
let StatusActive = ref('')
let StatusList = ref([
    { title: '全部', value: '0' },
    { title: '已支付', value: '1' },
    { title: '已发货', value: '2' },
    { title: '已收货', value: '3' },
    { title: '已完成', value: '4' },
    { title: '退货退款', value: '-1' },
])

//下拉刷新的数据
let list = ref([]) //数据列表
let page = ref(1)  //分页
let loading = ref(false) //加载状态
let finished = ref(false) //是否无更多数据
let refreshing = ref(false) //下拉刷新

// 申请仅退款
let orderid = ref(0)
let ApplyShow = ref(false)
let remark = ref('')

// 标签栏切换
const TabChange = async () => {
    refresh()
}

//下拉刷新
const refresh = async () => {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true
    //加载数据方法
    load()
}

//加载数据方法 查询订单数据
const load = async () => {
    //判断是否为加载中的状态
    if (refreshing.value) {
        refreshing.value = false
    }

    // 组装数据
    var params = {
        busid: proxy.$business.value.id,
        status: StatusActive.value,
        page: page.value
    }

    // 发送请求
    var result = await proxy.$POST({
        url: '/order/index',
        params
    })

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    //如果没有更多数据了 就说明已经加载到底了....
    if (result.code == 0) {
        finished.value = true
        return;
    }

    //数据修改
    result.data.map(item => {
        if (item.info) {
            item.info.attrs = JSON.parse(item.info.attrs)
        }
    })
    list.value = list.value.concat(result.data)
    page.value++
}

// 跳转订单详情
const OrderInfo = (orderid) => proxy.$router.push({ path: '/order/info', query: { orderid: orderid } })

//申请退款 / 申请退货退款
const OrderApply = (id) => {
    orderid.value = id
    ApplyShow.value = true
}

//申请退款 申请退货
const OrderApplyConfirm = async () => {
    //关闭弹框
    ApplyShow.value = false

    //发送请求
    var result = await proxy.$POST({
        url: '/order/apply',
        params: {
            orderid: orderid.value,
            busid: proxy.$business.value.id,
            remark: remark.value
        }
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    proxy.$success({
        message: result.msg,
        // duration: 3000,
        onClose: () => refresh()
    })
}

//填写退货单
const ToBackAdd = (id) => proxy.$router.push({ path: '/back/add', query: { orderid: id } })

//确认收货
const OrderConfirm = async (id) => {
    proxy.$confirm({
        title: '收货提醒',
        message: '是否确认收货',
    }).then(async () => {
        var result = await proxy.$POST({
            url: '/order/confirm',
            params: {
                orderid: id,
                busid: proxy.$business.value.id
            }
        })

        if (result.code == 0) {
            proxy.$fail(result.msg)
            return false
        } else {
            proxy.$success({
                message: result.msg,
                onClose: () => refresh()
            })
            return false
        }

    }).catch(() => { })
}
</script>

<style scoped>
:deep(.cart) {
    display: flex;
    width: 100%;
}

::v-deep .van-swipe-cell {
    width: 100%;
}

.delete-button {
    height: 100%;
}


.van-card {
    background-color: #fff;
}

.title {
    font-size: 14px;
    font-weight: bold;
}

.tag {
    margin-right: 5px;
}

.price {
    font-size: 13px;
    font-weight: bold;
}
</style>